<template>
  <div>
    <div id="container" style="width: 100vw; height: 100vh;background-color: #DAE4E4;"></div>
    <div id="paletter"></div>
    <component
      :is="currentView"
      :title="title"
      :file="file"
      :src="src"
      :visible="isShowParse"
      @close="changeParsePanelStatus"
    ></component>
  </div>
</template>

<script>
import MdPreview from '../components/MdPreview.vue'
import * as go from "gojs";
const $ = go.GraphObject.make;
export default {
  name: 'GoJs',
  components: {
    MdPreview
  },
  data() {
    return {
      isShowParse: false,
      currentView: 'MdPreview',
      title: 'Babel',
      file: '',
      src: '',
      nodeDataArray: [
        { key: "Service Worker", loc: '-3 227', color: "#67C23A", componentName: 'BabelGenerate', file: 'pwa/md/sw.md' },
        { key: "资源请求的拦截代理", loc: '400 100', componentName: '目标字符串',file: 'pwa/md/lanjie.md'},
        { key: "本地存储管理", loc: '400 200', componentName: 'sourcemap', file: 'pwa/md/bendicucun.md' },
        { key: "资源请求响应策略", loc: '405 320', componentName: 'sourcemap', file: 'pwa/md/ziyuan.md' },
        { key: "预缓存方案", loc: '409 432', componentName: 'sourcemap', file: 'pwa/md/yuhuancun.md' },
        { key: "生命周期", loc: '401 21', componentName: 'sourcemap', file: 'pwa/md/life.md' },
        { key: "核心技术", loc: '0 0', color: "#E6A23C", componentName: 'BabelInfo', file: 'http://172.16.1.12:8080/babel/BabelInfo.md' },
        { key: "pwa", loc: '-200 0', componentName: 'API', file: 'pwa/md/pwabook.md' },
        { key: "web App?", loc: '-600 -200', componentName: 'API', file: 'pwa/md/why.md' },
        { key: "为什么会出现 PWA", loc: '-600 -100', componentName: 'API', file: 'pwa/md/why.md' },
        { key: "什么是 PWA", loc: '-600 -50', componentName: 'API', file: 'pwa/md/what.md' },
        { key: "PWA优缺点", loc: '-600 0', componentName: 'API', file: 'pwa/md/youdian.md' },
        { key: "实践案例", loc: '-600 50', componentName: 'API', file: 'pwa/md/case.md' },
        { key: "小程序和pwa对比", loc: '-600 100', componentName: 'API', file: 'pwa/md/duibi.md' },
        { key: "Manifest", loc: '0 -175', color: "#67C23A", componentName: 'BabelParse', file: 'pwa/md/manifest.md' },
        { key: "消息通知", loc: '185 -168', componentName: 'plugins', file: 'pwa/md/tongzhi.md' },
        { key: "网络推送", loc: '386 -122', componentName: 'jsx',file: 'pwa/md/push.md'},
        { key: "问题及优化", loc: '-208 -168', componentName: 'jsx',file: 'pwa/md/youhua.md'},
        { key: "Push&Notification", loc: '200 0', color: "#67C23A", componentName: 'BabelTransform', file: 'http://172.16.1.12:8080/babel/BabelTransform.md' },

      ],
      treeNodeDataArray: [
        { key: "Alpha", color: "lightblue" },
        { key: "Beta", parent: "Alpha", color: "yellow" },  // note the "parent" property
        { key: "Gamma", parent: "Alpha", color: "orange" },
        { key: "Delta2", parent: "Beta", color: "lightgreen" },
        { key: "Beta", parent: "Gamma", color: "lightgreen" },
        { key: "Delta3", parent: "Delta2", color: "lightgreen" }
      ],
      formLineTo: [
        { from: 'pwa', to: '核心技术', thick: 1 },
        { from: 'pwa', to: '为什么会出现 PWA', thick: 1 },
        { from: 'pwa', to: '什么是 PWA', thick: 1 },
        { from: 'pwa', to: 'PWA优缺点', thick: 1 },
        { from: 'pwa', to: '实践案例', thick: 1 },
        { from: 'pwa', to: '小程序和pwa对比', thick: 1 },
        { from: 'pwa', to: '问题及优化', thick: 1 },
        { from: '核心技术', to: 'Service Worker', thick: 1 },
        { from: '核心技术', to: 'Manifest', thick: 1 },
        { from: '核心技术', to: 'Push&Notification', thick: 1 },
        { from: 'Push&Notification', to: '消息通知', thick: 1 },
        { from: 'Push&Notification', to: '网络推送', thick: 1 },
        { from: 'Service Worker', to: '资源请求的拦截代理', thick: 1 },
        { from: 'Service Worker', to: '本地存储管理', thick: 1 },
        { from: 'Service Worker', to: '资源请求响应策略', thick: 1 },
        { from: 'Service Worker', to: '预缓存方案', thick: 1 },
        { from: 'Service Worker', to: '生命周期', thick: 1 },

      ]
    }
  },
  mounted() {
    const diagram = $(go.Diagram, 'container');
    const {
      nodeDataArray,
      formLineTo,
      // treeNodeDataArray
    } = this;
    this.setNodeTemplate(diagram, 2);
    this.setLGraphLinksModel(diagram, { nodeDataArray, formLineTo });
    this.setLinkTemplate(diagram, {});
    // this.setTreeModel(diagram, { treeNodeDataArray });
    this.initGo(diagram);
    this.getNodeEvent(diagram);
  },
  methods: {
    changeParsePanelStatus() {
      this.isShowParse = !this.isShowParse;
    },
    // 初始化面板
    initGo(diagram) {
      diagram.undoManager.isEnabled = true;
      // 栅格
      // diagram.grid.visible = true;
    },
    // 设置图形链接模型
    setLGraphLinksModel(diagram, { nodeDataArray, formLineTo }) {
      diagram.model = new go.GraphLinksModel(nodeDataArray, formLineTo);
    },
    // 设置树模型
    setTreeModel(diagram, { treeNodeDataArray }) {
      diagram.model = new go.TreeModel(treeNodeDataArray);
    },
    // 设置通用节点模板, 初始化参数防止其他节点未初始化而出错
    setNodeTemplate(diagram, {
      margin = 5,
      fill = 'lightblue',
      figure = 'RoundedRectangle'
    }) {
      diagram.nodeTemplate =
      $(
        go.Node, 'Auto',
        new go.Binding("location", "loc", go.Point.parse),
        // { resizable: true, fromSpot: go.Spot.Right, toSpot: go.Spot.Left },
        $(go.Shape, { figure, fill }, new go.Binding('fill', 'color')),
        $(go.TextBlock, { margin }, new go.Binding('text', 'key'))
      )
    },
    // 设置通用链接
    setLinkTemplate(diagram, { 
      stroke = 'color', 
      strokeWidth = 'thick'
    }) {
      diagram.linkTemplate = 
      $(go.Link,
        { curve: go.Link.Bezier, toEndSegmentLength: 30, fromEndSegmentLength: 30 },
        $(go.Shape,
          new go.Binding("stroke", stroke),
          new go.Binding("strokeWidth", strokeWidth)),
        $(go.Shape,
          { toArrow: "OpenTriangle", fill: null },
          new go.Binding("stroke", stroke),
          new go.Binding("strokeWidth", strokeWidth)),
      );
    },
    // 点击节点
    getNodeEvent(diagram) {
      const _this = this
      diagram.addDiagramListener('ObjectSingleClicked',
      function(e) {
        var part = e.subject.part;
        if (!(part instanceof go.Link)) {
          console.log(part.location, 'part')
          // _this.currentView = part.data.componentName
          _this.title = part.data.key
          _this.file = part.data.file || ''
          _this.src = part.data.src || ''
          _this.changeParsePanelStatus()
        }
      }
    )
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
